<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS选择器</title>
    <style>
        * {
            margin: 20px;
        }

        .one{
            color: red;
            font-size: 18px;
        }
        .two{
            color: green;
            font-size: 14px;
        }
        #three{
            color:blue;
            font-size: 20px;
        }
        
        h1,h3{
            text-align: center;
        }
        .four {
            font-weight: bolder;
            font-style: italic;
        }

        div span{
            color:red;
            font-weight: 700;
        }
        
        div > span {
            color:green;
        }

        /* .brother + ul{ */
        .brother ~ ul{
            list-style-type: circle;
        }
        
    </style>
</head>
<body>
    <div class="one">class选择器条目1</div>
    <div class="one">class选择器条目1</div>
    <div class="two">class选择器条目2</div>
    <div class="two">class选择器条目2</div>
    <div>普通条目</div>
    <div id="three">ID选择器条目</div>

    <div>近日，学校<span>第十八期</span>入党积极分子培训班顺利结业。</div>
    <p>近日，学校<span>第十八期</span>入党积极分子培训班顺利结业。</p>

    <h1>居中对齐测试</h1>
    <h3>居中对齐测试</h3>

    <div class="one four">class选择器条目1+4</div>

    <div class="brother">
        <p>
            这是<span>测试</span>结果
        </p>
    </div>
    <!-- <hr/> -->
    <ul>
        <li>第一</li>
        <li>第二</li>
    </ul>
    <hr/>
    <ul>
        <li>第三</li>
        <li>第四</li>
    </ul>
</body>
</html>